<template>
  <el-dialog :title="title"
             :visible.sync="visible"
             v-loading="loading"
             :before-close="modalClose"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="50%"
             append-to-body>

    <el-form ref="formRef"
             :model="formModel"
             :rules="formRules"
             label-width="120px">
      <el-form-item label="商品分类："
                    prop="drugType">
        <el-select v-model="formModel.drugType"
                   placeholder="请选择商品分类"
                   @change="changeShopTypeList">
          <el-option v-for="item in shopTypeList"
                     :key="item.drugType"
                     :label="item.name"
                     :value="item.drugType">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称："
                    prop="drugName">
        <el-select v-model="formModel.drugName"
                   placeholder="请选择商品名称"
                   filterable
                   remote
                   reserve-keyword
                   clearable
                   :remote-method="remoteMethod"
                   :loading="loading1"
                   class="w-200"
                   @change="handleSelect">
          <el-option v-for="item in dataFilterList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="厂家名称："
                    prop="factoryName">
        <el-input v-model="formModel.factoryName"
                  placeholder="厂家名称"
                  class="w-200"
                  :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="规格："
                    prop="standard">
        <el-input v-model="formModel.standard"
                  placeholder="请输入规格"
                  class="w-200"
                  :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="包装："
                    prop="drugPackage">
        <el-input v-model="formModel.drugPackage"
                  placeholder="请输入规包装"
                  class="w-200"
                  :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="商品图片："
                    prop="logoUrl">
        <el-upload class="avatar-uploader"
                   :action="fileUpload"
                   :show-file-list="false"
                   list-type="picture-card"
                   accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
                   :on-success="(response, file, fileList) =>uploadSuccess(response, file, fileList, 'logoUrl')"
                   :before-upload="file =>beforeUpload(file, 'logoUrl')">
          <img v-if="formModel.logoUrl"
               :src="formModel.logoUrl"
               class="avatar">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="销售话术："
                    prop="salesScript">
        <el-input v-model="formModel.salesScript"
                  placeholder="请输入销售话术"
                  type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="功能主治："
                    prop="functionalIndications">
        <el-input v-model="formModel.functionalIndications"
                  placeholder="请输入功能主治"
                  type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="禁忌："
                    prop="taboo">
        <el-input v-model="formModel.taboo"
                  placeholder="请输入禁忌"
                  type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="不良反应："
                    prop="adverseReaction">
        <el-input v-model="formModel.adverseReaction"
                  placeholder="请输入不良反应"
                  type="textarea"></el-input>
      </el-form-item>

    </el-form>
    <p align="center">
      <el-button type="info"
                 @click="modalClose">取 消</el-button>
      <el-button type="primary"
                 @click="submitForm">新 增</el-button>
    </p>
  </el-dialog>
</template>
<script>
  export default {
    name: 'shopDialog', // 推荐商品
    props: {
      fileUpload: {
        type: String,
        required: true
      },
      shopDataObj: {
        type: Object,
        default: {}
      },
      shopDataList: {
        type: Array,
        default: []
      },
      visible: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        title: '新增推荐商品',
        loading: false,
        loading1: false,
        formModel: {
          drugId: null,
          drugType: '', // 商品分类
          drugName: '', // 商品名称
          factoryName: '', // 厂家名称
          standard: '', // 规格
          drugPackage: '', // 包装
          logoUrl: '', // 商品图片
          salesScript: '', // 销售话术
          functionalIndications: '', // 功能主治
          taboo: '', // 禁忌
          adverseReaction: '', // 不良反应
        },
        formRules: {
          drugType: [{ required: true, message: '请选择商品分类', trigger: 'chagne' }],
          drugName: [{ required: true, message: '请选择商品名称', trigger: 'blur' }],
        },
        shopTypeList: [
          { drugType: 2, name: "化学药" },
          { drugType: 3, name: "中成药" },
          { drugType: 4, name: "保健品" }
        ],
        options: [],
        dataList: [],
        dataFilterList: []
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性
      },
      submitForm () {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            this.$emit('childShopData', this.formModel);
            this.modalClose();
          }
        })
      },
      changeShopTypeList (val) {
        this.formModel.drugType = val;
      },
      // 远程搜索商品名称
      remoteMethod (query) {
        if (query !== '') {
          let _this = this;
          _this.loading1 = true;
          if (this.formModel.drugType === '') {
            this.$message.error('请先选择商品分类!');
            return
          }
          this.post(this.api.promote.getRecommendDrug, {
            name: query,
            typeList: [this.formModel.drugType]
          }).then(res => {
            if (res.data.code === '200') {
              _this.loading1 = false;
              _this.dataList = res.data.object;
            }
          })
          setTimeout(() => {
            _this.loading1 = false;
            _this.dataFilterList = _this.dataList.filter(item => item.name.indexOf(query) > -1);
          }, 200)
        } else {
          this.dataFilterList = [];
        }
      },

      handleSelect (item) {
        if (this.shopDataList.some(el => el.drugId === item)) {
          this.$message.error('商品名称不能重复添加!');
          this.formModel.drugName = '';
          return
        }
        let obj = this.dataFilterList.find(list => list.id == item);
        this.formModel.drugId = obj.id;
        this.formModel.drugName = obj.name;
        this.formModel.factoryName = obj.factoryName;
        this.formModel.standard = obj.standard;
        this.formModel.drugPackage = obj.drugPackage;
      },
      // 上传前的方法
      beforeUpload (file, option) {
        let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/bmp']
        const isJPG = types.includes(file.type);
        if (option === 'logoUrl') {
          if (!isJPG) {
            this.$message.error('上传图片必须是JPG/JPEG/GIF/PNG/BMP 格式!');
            return isJPG;
          }
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!');
            return isLt2M;
          }
        }
      },
      // 上传前的方法
      uploadSuccess (response, file, fileList, option) {
        if (response.code === '200') {
          // 状态码为200时则上传成功
          if (option === 'logoUrl') {
            this.formModel.logoUrl = file.response.object[0];
            this.$message.success('上传成功');
          }

        } else {
          // 状态码不是200时上传失败 从列表中删除
          fileList.splice(fileList.indexOf(file), 1);
          this.$message.error(response.message);
        }
      },
    },
    created () {
    }
  }
</script>
<style scoped lang="scss">
  .avatar-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /deep/ .el-upload {
      .avatar {
        display: block;
        width: 98px;
        height: 98px;
      }
      &.el-upload--picture-card {
        width: 98px;
        height: 98px;
        line-height: 98px;
        overflow: hidden;
      }
      &:hover {
        border-color: #409eff;
      }
    }
    /deep/ .el-upload-list--picture-card {
      .el-upload-list__item {
        width: 98px;
        height: 98px;
      }
    }
  }
</style>